<template>
  <div class="chat-header uni-page-head">
    <div class="uni-page-head-hd">
      <div class="uni-page-head-btn" @click="goBack">
        <i class="uni-btn-icon" style="color: rgb(0, 0, 0); font-size: 27px"></i>
      </div>
      <div>
        {{ pageTitle }}
      </div>
      <div class="btn" @click="goto(chatType, consultation.id)">{{ chatType }}详情</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  TUIStore,
  StoreName,
  IConversationModel,
  TUITranslateService,
} from '@tencentcloud/chat-uikit-engine'
import { TUIGlobal } from '@tencentcloud/universal-api'
import { onLoad } from '@dcloudio/uni-app'
import { onMounted, onUnmounted, ref } from '../../../adapter-vue'

const pageTitle = ref<string>('')
const currentConversation = ref<IConversationModel>()
const typingStatus = ref(false)

const setChatHeaderContent = (content: string) => {
  pageTitle.value = content
  TUIGlobal?.setNavigationBarTitle({
    title: content || '云通信 IM',
  })
}

onMounted(() => {
  TUIStore.watch(StoreName.CONV, {
    currentConversation: onCurrentConversationUpdated,
  })
  TUIStore.watch(StoreName.CHAT, {
    typingStatus: onTypingStatusUpdated,
  })
})

onUnmounted(() => {
  TUIStore.unwatch(StoreName.CONV, {
    currentConversation: onCurrentConversationUpdated,
  })
  TUIStore.unwatch(StoreName.CHAT, {
    typingStatus: onTypingStatusUpdated,
  })
})

onLoad(() => {
  setChatHeaderContent(currentConversation.value?.getShowName())
})

function onCurrentConversationUpdated(conversation: IConversationModel) {
  currentConversation.value = conversation
  if (!typingStatus.value) {
    setChatHeaderContent(currentConversation?.value?.getShowName())
  }
}

function onTypingStatusUpdated(status: boolean) {
  typingStatus.value = status
  if (typingStatus.value) {
    setChatHeaderContent(TUITranslateService.t('TUIChat.对方正在输入'))
  } else {
    setChatHeaderContent(currentConversation.value?.getShowName())
  }
}

const goBack = () => {
  uni.navigateBack({
    delta: 1, //返回层数，2则上上页
  })
}

const goto = (type, id) => {
  const url =
    type == '问诊'
      ? `/pages/ConsultationRoom/Consultation/Consultation?id=${id}`
      : `/pages/ConsultationRoom/consultationDetails/consultationDetails?id=${id}`
  uni.navigateTo({
    url,
  })
}

// 聊天状态
const consultation = ref<object>({})
const chatType = ref<string>('')
// UI 层监听当前更新通知
let onCurrentGroupUpdated = function (currentGroup) {
  if (!currentGroup?.groupCustomField) return

  // 设置会话自定义字段
  chatType.value = currentGroup.groupCustomField.find(
    (item: any) => item.key === 'diagnosis_type'
  ).value
  consultation.value = JSON.parse(
    currentGroup.groupCustomField.find((item: any) => item.key === 'consultation').value || 0
  )
}

// 监听当前会话ID更新
TUIStore.watch(StoreName.GRP, {
  currentGroup: onCurrentGroupUpdated,
})
</script>

<style scoped lang="scss">
.uni-page-head {
  position: fixed;
  left: var(--window-left);
  right: var(--window-right);
  height: 44px;
  height: calc(44px + constant(safe-area-inset-top));
  height: calc(44px + env(safe-area-inset-top));
  padding: 7px 3px;
  padding-top: calc(7px + constant(safe-area-inset-top));
  padding-top: calc(7px + env(safe-area-inset-top));
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  overflow: hidden;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  box-sizing: border-box;
  z-index: 998;
  background-color: #fff;
  -webkit-transition-property: all;
  transition-property: all;
}
.uni-page-head-hd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
}
.btn {
  margin-right: 20rpx;
  color: #3e6efe;
}
</style>
